<template>
  <div class="index" style=" font-size: 0.25rem; padding: 0.3rem;">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getlist">
    		<div v-for="item in list" :key="item.id" @click="tiaozhuan(item)"
    			style="padding: 0.2rem 0.3rem; background: #fff; color: #020C1D; margin-bottom: 0.3rem; box-shadow: 0 0 10px #ddd; border-radius: 0.1rem;">
    			<div class="mb10" style="font-size: 0.3rem; font-weight: bold;">{{item.title}}</div>
    			<div class="mb10" style="color: #787D85;">商品编码:{{item.fetch_code}}</div>
    			<div class="mb10" style="color: #787D85;">更新时间:{{item.updated_at}}</div>
          <div style="background: #F6F8FB; padding: 0.3rem;  border-radius: 0.1rem;">
            <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico7.png" style="width: 20px; margin-right: 10px;">
              <div style="width: 1.6rem; color: #020C1D; ">上下架状态：</div>
              <div style="color: #787D85;">
                <span v-if="item.status == 100">上架</span>
                <span v-if="item.status == 0">下架</span>
              </div>
            </div>
            <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico6.png" style="width: 20px; margin-right: 10px;">
              <div style="width: 1.6rem; color: #020C1D;">上线时间：</div>
              <div style="color: #787D85;">{{item.created_at}}</div>
            </div>
            <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico5.png" style="width: 20px; margin-right: 10px;">
              <div style="width: 1.6rem; color: #020C1D;">开卡年龄：</div>
              <div style="color: #787D85;">{{item.min_age}}-{{item.max_age}}</div>
            </div>
            <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico4.png" style="width: 20px; margin-right: 10px;">
              <div style="width: 1.6rem; color: #020C1D;">合约期：</div>
              <div style="color: #787D85;">{{item.contract}}</div>
            </div>
            <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico3.png" style="width: 20px; margin-right: 10px;">
              <div style="width: 1.6rem; color: #020C1D;">快递方式：</div>
              <div style="color: #787D85;">{{item.express}}</div>
            </div>
            <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico2.png" style="width: 20px; margin-right: 10px;">
              <div style="width: 1.6rem; color: #020C1D;">激活方式：</div>
              <div style="color: #787D85;">{{item.activation_method}}</div>
            </div>
            <div class="mb10 flexc"> <img src="https://gperson.gantanhaokeji.top/waibugongjuico1.png" style="width: 20px; margin-right: 10px;">
              <div style="width: 1.6rem; color: #020C1D;">支持选号：</div>
              <div style="color: #787D85;">
                <span v-if="item.take_number > 0">支持</span>
                <span v-if="item.take_number == 0">不支持</span>
              </div>
            </div>
          </div>
    		</div>
    	</van-list>
  </div>
</template>

<script>

  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;

  export default {
    name: 'shangpinliebiao',
    data() {
      return {
        loading:false,
        finished:false,
        list:[],
        all:{
          page:1,
          page_size:20,
          status: 100,
        }
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      tiaozhuan:function(item){
        localStorage.setItem('xq',JSON.stringify(item))
        this.$nextTick(()=>{
          this.$router.push('/shangpinxiangqing?id='+item.id)
        })
      },
      fanye: function(page) {
        this.all.page = page
        this.getlist()
      },

      getlist: function() {
        this.loading = true;
        axios.get(`/api/page/package/list`, {
            params: this.all
          })
          .then(response => {
            if (response.data.msg.code == 0) {


              if (response.data.data.data.length < 20) {
              	this.finished = true
              }
              this.list = [...this.list,...response.data.data.data]
              this.all.page = this.all.page + 1;
              this.loading = false;

            } else {
              vant.Toast(response.data.msg.info);
            }
          })
      },

    }
  }
</script>


<style scoped lang="less">
  .mb10{ margin-bottom: 0.2rem;}
</style>
